<template>
  <div class="admin-dashboard">
    <!-- 系统功能介绍 -->
    <el-card class="intro-card">
      <template #header>
        <div class="card-header">
          <span>高校教师学术成果信息综合管理系统 - 管理员控制台</span>
        </div>
      </template>
      <div class="intro-content">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="8">
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon size="40" color="#409EFF"><UserFilled /></el-icon>
              </div>
              <h3>用户管理</h3>
              <p>全面管理系统中的教师和学生用户，包括用户注册、权限分配、账户状态管理等功能，确保系统用户的规范化管理。</p>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon size="40" color="#67C23A"><Setting /></el-icon>
              </div>
              <h3>系统配置</h3>
              <p>配置系统运行参数，包括审批流程设置、成果类型管理、权限配置等，为系统提供灵活的配置管理能力。</p>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon size="40" color="#E6A23C"><Monitor /></el-icon>
              </div>
              <h3>系统监控</h3>
              <p>实时监控系统运行状态，包括用户活跃度、成果提交统计、系统性能指标等，为系统优化提供数据支撑。</p>
            </div>
          </el-col>
        </el-row>
        
        <div class="admin-description">
          <h3>管理员职责</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <ul class="responsibility-list">
                <li><strong>用户管理：</strong>负责教师账户的创建、权限分配和状态管理</li>
                <li><strong>系统维护：</strong>确保系统正常运行，处理异常情况</li>
                <li><strong>数据监控：</strong>监控系统使用情况和数据统计</li>
              </ul>
            </el-col>
            <el-col :span="12">
              <ul class="responsibility-list">
                <li><strong>安全管理：</strong>维护系统安全，管理用户权限和数据保护</li>
                <li><strong>流程优化：</strong>根据使用情况优化系统流程和配置</li>
                <li><strong>技术支持：</strong>为用户提供技术支持和问题解决</li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <!-- 快速操作区域 -->
    <el-card class="quick-actions-card">
      <template #header>
        <div class="card-header">
          <span>管理操作面板</span>
        </div>
      </template>
      <div class="quick-actions">
        <el-button type="primary" @click="goToCreateTeacher">
          <el-icon><el-icon-plus /></el-icon>注册教师用户
        </el-button>
      </div>
    </el-card>

    <!-- 最近添加的用户 -->
    <el-card class="recent-users-card">
      <template #header>
        <div class="card-header">
          <span>近期注册教师用户</span>
          <el-button class="view-all-btn" type="text" @click="goToUsers">查看所有用户</el-button>
        </div>
      </template>
      <el-table :data="recentUsers" style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="realName" label="教师姓名" />
        <el-table-column prop="department" label="所属院系" />
        <el-table-column prop="createdAt" label="注册日期" />
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Plus as ElIconPlus,
  UserFilled,
  Setting,
  Monitor
} from '@element-plus/icons-vue'

interface RecentUser {
  username: string
  realName: string
  department: string
  createdAt: string
}

export default defineComponent({
  name: 'AdminDashboard',
  components: {
    ElIconPlus,
    UserFilled,
    Setting,
    Monitor
  },
  setup() {
    const router = useRouter()
    const loading = ref(true)
    
    // 最近添加的用户
    const recentUsers = ref<RecentUser[]>([])
    
    // 加载仪表盘数据
    const loadDashboardData = async () => {
      try {
        // 这里应该调用API获取实际数据
        // 暂时使用模拟数据
        setTimeout(() => {
          recentUsers.value = [
            {
              username: 'teacher1',
              realName: '张教授',
              department: '计算机科学学院',
              createdAt: '2023-06-15'
            },
            {
              username: 'teacher2',
              realName: '王教授',
              department: '机械工程学院',
              createdAt: '2023-06-14'
            },
            {
              username: 'teacher3',
              realName: '李教授',
              department: '电子工程学院',
              createdAt: '2023-06-12'
            }
          ]
          
          loading.value = false
        }, 1000)
      } catch (error) {
        console.error('加载仪表盘数据失败:', error)
        ElMessage.error('加载数据失败')
        loading.value = false
      }
    }
    
    // 导航方法
    const goToCreateTeacher = () => {
      router.push('/admin/users?action=create')
    }
    
    const goToUsers = () => {
      router.push('/admin/users')
    }
    
    onMounted(() => {
      loadDashboardData()
    })
    
    return {
      loading,
      recentUsers,
      goToCreateTeacher,
      goToUsers
    }
  }
})
</script>

<style lang="scss" scoped>
.admin-dashboard {
  .intro-card {
    margin-bottom: 30px;
  }
  
  .intro-content {
    padding: 20px 0;
  }
  
  .feature-item {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #fafbfc;
    transition: all 0.3s ease;
  }
  
  .feature-item:hover {
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .feature-icon {
    margin-bottom: 15px;
  }
  
  .feature-item h3 {
    margin: 15px 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .feature-item p {
    color: #666;
    line-height: 1.6;
    font-size: 14px;
    margin: 0;
  }
  
  .admin-description {
    margin-top: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
  }
  
  .admin-description h3 {
    margin: 0 0 25px 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
  }
  
  .responsibility-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .responsibility-list li {
    margin-bottom: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    line-height: 1.5;
  }
  
  .responsibility-list li:last-child {
    border-bottom: none;
  }
  
  .responsibility-list strong {
    color: #fff;
  }

  .quick-actions-card,
  .recent-users-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: none;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      
      .view-all-btn {
        color: #555;
        
        &:hover {
          color: #333;
        }
      }
    }
    
    .quick-actions {
      display: flex;
      gap: 10px;
      
      .el-button {
        &.el-button--primary {
          background-color: #424242;
          border-color: #424242;
          
          &:hover, &:focus {
            background-color: #333333;
            border-color: #333333;
          }
        }
      }
    }
  }
  
  .el-table {
    --el-table-border-color: rgba(0, 0, 0, 0.05);
    --el-table-header-bg-color: #f9f9f9;
    --el-table-row-hover-bg-color: #f5f5f5;
  }
}
</style> 